<template>
	<div style="background-color:#f4fafe ;">
		<div class="main" style="margin-top: 1.25rem;">
			<div class="right">
				<div class="dplayer-video">
					<video :src="coursewareUrl" controls="controls" style="width: 100%;height: 100%;" id="player">
						your browser does not support the video tag
					</video>
					<!-- <video class="dplayer-video dplayer-video-current" webkit-playsinline x-webkit-airplay="allow" poster="http://all.meedu.tech/images/player-thumb.png"
					 playsinline preload="metadata"  src="/i/movie.ogg"></video> -->
				</div>

			</div>
			<div class="left">
				<div class="chapter-item">
					<el-collapse v-model="activeNames" @change="handleChange" style="width: 100%;">
						<el-collapse-item v-for="(Item,index) in ChapterList" :key="Item.id" @click.native="ChapterChange(Item.id,index)">
							<template slot="title" style="font-size: 1.25rem;font-weight: 500;">
								<h4>{{Item.chapterName}}</h4>
							</template>
							<ul class="record">
								<li class="video-item" v-for="(ite,index) in PeriodList" :key="index+'inf'" @click="changeId(ite.id,ite.periodName)" :class="{active:ite.isFalse}">
									<div class="video-title"><i class="el-icon-video-play" style="font-size: 1.25rem;margin-right: 0.625rem;"></i>1-2
										{{ite.periodName}}</div>
									<div class="video-info"><span>{{ite.createTime}}</span></div>
								</li>

							</ul>

						</el-collapse-item>

					</el-collapse>
				</div>
			</div>
		</div>
		<div class="tabs">
			<div class="item-tab" @click="change(2)" style="font-weight: 600;color: #03d3bd;">
				课时附件
				<div class="actline"></div>
			</div>
			<div class="item-tab" @click="change(3)">课时测试</div>
		</div>
		<div style="min-height: 25rem;" v-show="active==2" class="attach-list-box">
			<el-table :data="tableData1" style="width: 100%">
				<el-table-column prop="coursewareUrl" label="文件名" show-overflow-tooltip>
					<template slot-scope="scope">
						<a class="file-name" @click="findFile(scope.row)">{{ getFileName(scope.row.coursewareUrl) }}</a>
					</template>
				</el-table-column>
				<el-table-column prop="isFirst" label="类别" :formatter="courseTypeFormatter"></el-table-column>
				<el-table-column prop="createTime" label="上传日期" :formatter="dataFormatter">
				</el-table-column>
				<el-table-column prop="operator" label="操作" width="80">
					<template slot-scope="scope">
						<el-button type="text" >,<a :href="BASE_URL + '/minio/download?fileURL='+scope.row.coursewareUrl">下载</a></el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="margin-bottom: 2.5rem;" v-show="active==3" class="attach-list-box1">
			<el-empty :image-size="200" v-if="questions.length<1"></el-empty>
			<div class="topic" v-if="questions.length>1">
				<div class="topic_main">
					<div style="font-weight: 400;font-size: 1.25rem;">{{periodName}}:{{textname}}</div>
					<div >共{{questions.length}}题</div>
				</div>
				<div class="question" v-for="(item, idx) in questions" :key="idx">

					<p style="display: flex;">{{ `${idx+1}.[${item.name}](${item.score})`}}
						<div v-html="`${md(item.content)}`"></div>
					<!-- </p> -->
					<div v-for="(Item,indx) in item.optionsList" :key="indx+'hh'" style="display: flex;">
						<div v-if="item.topicId==1">
							<el-radio v-model="item.answer" :label="Item.id" style="margin-top: 0.625rem;">
								<div style="display: flex;">{{letter[indx]}}:
									<div v-html="`${md(Item.content)}`"></div>
								</div>
							</el-radio>
						</div>
						<div v-if="item.topicId==2">
							<el-checkbox-group v-model="item.answerList">
								<el-checkbox :label="Item.id" :key="indx" style="margin-top: 1.25rem;">
									<div v-html="`${md(Item.content)}`"></div>
								</el-checkbox>
							</el-checkbox-group>
						</div>
					</div>
					<div v-if="item.topicId==3">

						<div v-for="(Item,indx) in exam" :key="indx+'hh'" style="display: flex;">
							<el-radio v-model="item.answer" :label="Item.id" style="margin-top: 0.625rem;">
								<div>{{letter[indx]}}:{{Item.value}}
								</div>
							</el-radio>
						</div>
					</div>
					<div v-if="item.topicId==4" style="height: 22.5rem;">
						<quill-editor v-model="item.answer" style="height:260px;background-color: white;margin-top: 1.25rem;"></quill-editor>
					</div>
					<div v-if="item.topicId==5" style="height: 22.5rem;">
						<quill-editor v-model="item.answer" style="height:260px;background-color: white;margin-top: 1.25rem;"></quill-editor>
					</div>


				</div>
			    <div style="margin-top: 1.875rem;display: flex;justify-content: flex-end;"><el-button @click="submitJob()">提交</el-button></div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		HttpManagerStudent
	} from "../../../../request/student.js"
	import {
		HttpManager
	} from "../../../../request/Teacher.js"
   import {
		TestManager
	} from "../../../../request/test.js"
	import {
		BASE_URL
	} from "../../../../request/config.js"
	import {
		addCoursewareForPeriod,
		deleteCourseware,
		getCoursewareByPeriodId,
		getChapterTestByPeriodId,
		download
	} from "../../../../api/education/courseware.js";
	import marked from "marked";
	const cityOptions = ['上海', '北京', '广州', '深圳'];
	export default {

		data() {
			return {
				active: 2,
				checkedCities: [],
				cities: cityOptions,
				hh: '',
				activeNames: ['1'],
				ChapterList: [],
				PeriodList: [],
				radio: '',
				coursewareUrl: '/i/movie.ogg',
				index: '',
				tableData: [],
				tableData1: [],
				questions: [],
				question: [],
				textname: '',
				letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
				exam: [{
						value: "正确",
						id: 1
					},
					{
						value: "错误",
						id: 0
					}
				],
				periodName:'',
				chapterTestId:'',
				testPaperId:'',
				BASE_URL:BASE_URL
			}
		},
		methods: {
			change(e) {
				this.active = e;
				// this.getInfo();
			},
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;

			},
			//通过课程id获取章节
			getChapterByCourseId() {
				var parmas = {
					courseId: localStorage.getItem("ClassId"),
					isTeacher: false
				}
				HttpManager.getChapterByCourseId(parmas).then(e => {
					console.log(e);
					this.ChapterList = e.data.data;
				})
			},
			//根据章节id获取课时
			getPeriodByChapterId(id) {
				var parmas = {
					chapterId: id,
					isTeacher: false
				}
				HttpManager.getPeriodByChapterId(parmas).then(e => {
					console.log(e);
					this.PeriodList = e.data.data;
				})
			},
			ChapterChange(id, index) {
				this.index = index;
				this.getPeriodByChapterId(id);
			},
			changeId(id,periodName) {
				this.periodName=periodName;
				this.getCoursewareByPeriodId(id);
				this.getCoursewareByPeriod(id);
				this.changeHandle(id);
			},
			//根据课时id获取课件
			getCoursewareByPeriodId(id) {
				var parmas = {
					isTeacher: false,
					periodId: id
				}
				HttpManagerStudent.getCoursewareByPeriodId(parmas).then(e => {
					this.coursewareUrl = '/i/movie.ogg';
					for (let i = 0; i < e.data.data.length; i++) {
						if (e.data.data[i].isFirst) {
							this.coursewareUrl = e.data.data[i].coursewareUrl;
						}
					}

				})
			},
			handleChange() {

			},
			dataFormatter(row, col, cellValue) {
				return cellValue ? cellValue.split('T').join(' ') : '-';
			},
			courseTypeFormatter(row, col, cellValue) {
				const obj = {
					1: '课件',
					0: '附件'
				}
				return obj[cellValue] || '-';
			},
			getInfo() {
				var time;
				var pl = document.getElementById("player");
				time = pl.duration;
				var totalSecond = Math.floor(time);
				// 得到分钟数加秒数
				if (totalSecond > 60) {
					var minute = Math.floor(totalSecond / 60);
					if (minute < 10) {
						minute = "0" + minute;
					}
					console.info("second --> " + totalSecond % 60);
					console.info("minute + second --> " + minute + ":" + totalSecond % 60);
				}
				// alert(totalSecond);
				alert(time)
			},
			getCoursewareByPeriod(id) {
				getCoursewareByPeriodId({
					periodId: id,
					isTeacher: false
				}).then(res => {
					this.tableData1 = res.data.data
				})
			},
			getFileName(fileName) {
				const arr = fileName.split('/')
				return arr[arr.length - 1]
			},
			changeHandle(id) {

				var parmas = {
					periodId: id
				}
				getChapterTestByPeriodId(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					if(e.data.code==500)
					{
                   this.$message({
                      message: e.data.message,
                     type: 'warning'
                     });
					}else{
                   
					 this.testPaperId=e.data.data.testPaperId;
					 this.chapterTestId=e.data.data.id;
					 this.getQuestionnaireTest(this.testPaperId);
					}
					
				
				})

			},
			md(content) {
				return marked(content);
			},
			submitJob() {
				var singleList = [];
				var multipleList = [];
				var judgeList = [];
				var fillsList = [];
				var shortAnswer = [];
				let data = [];
				for (let i = 0; i < this.questions.length; i++) {
					// alert(this.danxuanti[i].id);
					if (this.questions[i].topicId !== 2) {
						singleList.push({
							questionId: this.questions[i].id,
							questionAnswer: this.questions[i].answer
						});

					} else if (this.questions[i].topicId === 2) {
						multipleList.push({
							questionId: this.questions[i].id,
							questionAnswer: this.questions[i].answerList.join(',')
						});
					}
				}
				data.push(...singleList);
				data.push(...multipleList);
				data.push(...judgeList);
				data.push(...fillsList);
				data.push(...shortAnswer);
				HttpManager.studentSubmitChapterTest(data, 480, this.chapterTestId).then(res => {
					console.log(res);
					// this.$router.push('/workstu');
				})
			},

			getQuestionnaireTest(id) {
			
				var parmas = {
					id: id
				}
				TestManager.getQuestionnaireTest(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.question = e.data.data;
					this.textname = this.question.testPaper.name;
					this.questions = e.data.data.questions.map(q => {
						return {
							...q,
							answerList: [],
						}
					})
					console.log(this.questions);
				})
			},
			//下载文件
			Courseware(val)
			{
				let link = document.getElementById("linkUrlteacher");
				link.href = BASE_URL + '/minio/download?fileURL='+val.coursewareUrl;
				link.click();
				// var parmas={
				// 	fileURL:val.coursewareUrl
				// }
				// download(parmas).then(e=>{
				// 	console.log(e);
				// })
				
			}




		},
		created() {
			this.getChapterByCourseId();

		}
	}
</script>

<style scoped="scoped">
	.active {
		color: #00B8A6;
	}

	.main {

		display: flex;
		width: 80%;
		margin: 0 auto;
	}

	.right {
		/* background-color: #008997; */
		height: 30.25rem;
		width: 70%;
	}

	.left {
		background-color: #ffffff;
		height: 30.25rem;
		width: 30%;
		border-radius: 0.3125rem;
		overflow: scroll;
		overflow-x: hidden;
	}

	.dplayer-video-wrap {
		/* position: relative; */
		background: #000;
		font-size: 0;
		width: 100%;
		height: 100%;
	}

	.dplayer-video-wrap .dplayer-video-current {
		display: block;
	}

	.dplayer-video {
		width: 100%;
		height: 100%;

	}

	.video-item {
		width: 100%;
		height: 60px;
		line-height: 60px;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		margin-bottom: 30 px;
		cursor: pointer;
		list-style: none;
		/* background-color: #00B6B4; */


	}

	.video-item:hover {}

	.course-chapter-box {
		width: 1200px;
		padding: 50px 30px;
		background: rgb(255, 255, 255);
		margin-top: 30px;
		border-radius: 8px;
	}

	.chapter-videos-box {
		width: 100%;
		height: auto;
		margin-top: 30 px;
	}

	.video-title {
		height: 14px;
		font-size: 14px;
		font-weight: 400;
		color: rgb(51, 51, 51);
		line-height: 14px;
		margin-left: 15px;
	}

	.play-icon {
		width: 24px;
		height: 24px;
		cursor: pointer;
	}

	.chapter-name {
		margin-left: 0.625rem;
		width: 100%;
		height: 15px;
		font-size: 16px;
		font-weight: 500;
		color: rgb(51, 51, 51);
		line-height: 15px;
		margin-bottom: 30px;
	}

	.chapter-item {
		width: 100%;
		margin-left: 1.25rem;
		height: auto;
		/* margin-top: 20px; */
	}

	.video-info {
		position: absolute;
		height: 14px;
		font-size: 14px;
		font-weight: 400;
		color: #999;
		line-height: 14px;
		top: 5 px;
		right: 0;
		
	}

	.tabs {
		width: 90%;
		margin: 0 auto;
		height: 72px;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		padding: 28px 30px;
		background-color: white;
	}

	.item-tab {
		width: 64px;
		height: 16px;
		margin-right: 1.875rem;
		font-size: 16px;
		font-weight: 400;
		color: #666;
		line-height: 16px;
		margin-right: 80 px;
		cursor: pointer;
		position: relative;
	}

	.tabs {
		width: 80%;
		margin: 0 auto;
		height: 72px;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		padding: 28px 30px;
		background-color: white;
	}

	.item-tab {
		width: 64px;
		height: 16px;
		margin-right: 1.875rem;
		font-size: 16px;
		font-weight: 400;
		color: #666;
		line-height: 16px;
		margin-right: 80 px;
		cursor: pointer;
		position: relative;
	}

	.actline {
		width: 52px;
		height: 4px;
		background: #03d3bd;
		position: absolute;
		left: 6px;
		top: 40px;
	}

	.attach-item {
		width: 100%;
		box-sizing: border-box;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
	}

	.attach-name {
		height: 16px;
		font-size: 16px;
		font-weight: 500;
		color: #333;
		line-height: 16px;
	}

	.download-attach {
		margin-left: 30px;
		width: 104px;
		height: 40px;
		background: #03d3bd;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 400;
		color: #fff;
		cursor: pointer;
	}

	.attach-list-box {
		width: 80%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 50px 20px;
		background: #fff;
		margin-top: 30px;
		border-radius: 8px;
	}

	.attach-list-box1 {
		width: 80%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 0 30px;
		background: #fff;
		margin-top: 30px;
		border-radius: 8px;
	}

	.topic {
		margin-top: 3.125rem;
		/* height: 80%; */
		background-color: #fff;
	}

	.topic_main {
		display: flex;
		justify-content: space-between;
	}

	.question {
		/* flex: 5; */
		display: flex;
		flex-direction: column;
		padding: 50px;
		height: 200px;
		border-bottom: 1px solid #dfdfdf;
	}

	.Intem_radio {
		display: flex;
		flex-direction: column;
	}

	.el-radio {
		margin-top: 1.25rem;
	}

	.el-checkbox {
		margin-top: 1.25rem;
	}
	.question {
		flex: 5;
		display: flex;
		flex-direction: column;
		padding: 50px;
		border-bottom: 1px solid #dfdfdf;
	}
	.question .el-radio-group {
		display: flex;
		flex-direction: column;
	}
	.el-radio-group .el-radio {
		height: 40px;
		line-height: 40px;
	}
	
	.question li {
		list-style: none;
		display: block;
		height: 40px;
		margin-left: 1.875rem;
		display: flex;
		align-items: center;
	}
	
	.question span {
		display: inline-block;
		height: 20px;
		padding: 2px 5px;
		border-radius: 3px;
		border: 1px solid #fdf6ec;
	}
	
	.question .yes {
		background: #f0f9eb;
		color: #97d3bf;
	}
	
	.question .no {
		background-color: #fdf6ec;
		color: #e7ac95;
	}
	.el-radio{
		display: flex;
		margin-top: 1.875rem;
	}
</style>
